<template>
	<view class="index-view" >

		<!-- 头部搜索 与其余信息 -->
		<view class="navbar-view"> 
			<up-navbar @leftClick="leftClick">
				<template #right>
					<view class="search-view" >  
						<up-search  v-model="searchGoods" @clickIcon="searchChange" @search="searchChange" actionText="" @change="searchChange" 
						    searchIcon='https://oss.jtmckj.com/supplyH5/search-icon.png'  :clearabled="false" :showAction='false' placeholder="请输入">
						</up-search>
					</view>
				</template>
			</up-navbar>
		</view> 
		
		<!-- 门店标题 桌台号 -->
		<shopTableInfo :storeShopInfo='storeShopInfo' :storeTableInfo='storeTableInfo'/> 
		
		<view v-if="bannerList?.length > 0" style='width: 702rpx;height: 320rpx;border-radius: 8rpx;margin: 0 24rpx;'>
			<u-swiper :list="bannerList" keyName="carouselPic" circular height="320rpx" imgMode='scaleToFill'></u-swiper> 
		</view>
		
		<!-- 内容区域 -->
		<view class="content-view">
			
			<view class="h-20"></view>
			
			<!-- 无商品缺省 -->
			<view class="empty-view" v-show="leftList <= 0 && listx <= 0">
				<!-- <mescroll-empty ></mescroll-empty>  -->
				<image class="empty-gif" src="/assets/gif/gif_loading_black.gif"  mode=""></image>
			</view> 
			<!-- 商品区域 -->
			<view class="chxy-row"> 
				<!-- 左侧分类列表  --> 
				<scroll-view class="left-goods-view" scroll-y="true" :scroll-into-view="scrollintoviewLeft" scroll-with-animation> 
					<view v-for="(item,index) in leftList" :key="item.id" :id="item.id" :ref="item.id"  @click.stop="toAssign(item,index)" :class="[ leftCheckIndex === index ? 'checkBac' : 'noCheckBac',  leftCheckIndex === index && themeInfo === '001' ? 'checkBac' : (leftCheckIndex === index ? 'checkBacGay' : '') ]">
						<image  :class="{'fl-img': leftCheckIndex !== index && themeInfo === '001','': leftCheckIndex === index}" v-if="item.goodsTypeImage && leftCheckIndex === index" :src="item.goodsTypeImage" class="wh54"></image>
						<up-image v-if='!item.goodsTypeImage && leftCheckIndex === index' width="54rpx" height="54rpx" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/icon-default.png"></up-image> 
						<view class="h-10"></view>
						<view class="fz-20">{{item.goodsTypeName}}</view>
						<view :class="leftCheckIndex === index ? '': 'checkLine'"></view>
					</view>
					<view>
						<view class="h-40"></view>
					</view> 
				</scroll-view>

				<!-- 右侧商品列表   -->
				<scroll-view class="right-goods-view" :scroll-top="rightScrollTop"  @scroll="rightScroll" scroll-y="true" :scroll-into-view="scrollintoview" scroll-with-animation	>
					<view v-for="(item,index) in listx" :key="item.id" :id="item.id" :ref="item.id">
						<view class="right-item-view" :style="'height:' + item.height +'rpx'" >
							 
							<view v-if="item.title" class="right-item-title"> 
								<view class="goods-title">
									{{item.title}}
								</view>
							</view>
							<view v-if="item.title && item.typeAttachment" class="right-item-img">
								<image :src="item.typeAttachment" class="item-img"></image>
							</view>
							 
							<view class="chxy-row-ac right-goods-cell">  
								<up-image v-if="item.attachment" @click="previewImageFun(item.attachment)" width="200rpx" height="200rpx" :src="item.attachment" mode="aspectFill" radius='10rpx'></up-image>
								<up-image v-else width="200rpx" height="200rpx" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/icon-default.png" radius='10rpx'></up-image>
								<view class="chxy-column-c-c goods-cell-text" >
									<view class="h-20"></view>
									<view style="height: 138rpx;">  
										<text class="over-hidden-two goods-cell-name" :class="{'ch-goods-cell-name':['0024', '0025'].includes(storeShopInfo.orgCode)}"> 
											{{item.goodsName}}{{ item.englishName }}
										</text>
										<view class="h-8"></view>
										<view class="over-hidden-el goods-cell-desc" v-if="item.descript">
											{{item.descript || ''}}
										</view>
										<view class="h-8"></view>
										
										<template v-if="storeCardInfo.isPayCard ==='1' || themeInfo == '002' || themeInfo == '003'"> 
											<view class="inter-Member chxy-row-ac" v-if="themeInfo == '001'">
												<view class="left-xq chxy-row-ac">
													<image src="https://oss.jtmckj.com/wmp/qnjg/order/i_icon_ball-y2.png" mode=""></image>
													<view class="">星际会员</view>
												</view>
												<view class="right-box-in chxy-row-c-c"> 
													<view class="dol">￥</view>
													<view class="price-xj">{{item.vipPrice}}</view>  
												</view>
											</view> 
											<view class="inter-Member2" :class="{'ch-inter-Member2':['0024', '0025'].includes(storeShopInfo.orgCode)}" v-else>
												   <view class="left-xq">
														 <image src="https://oss.jtmckj.com/wmp/qnjg/order/i_icon_ball-y.png" mode=""></image>
														 <view class="" v-if="themeInfo == '002' || themeInfo == '003'">
															共享股东
														 </view>
														 <view class="" v-else>
															星际会员
														 </view>
												   </view>
												   <view class="right-box">
													   <view class="price-label">
														   ￥
													   </view>
														  <text class="price">{{item.vipPrice}}</text>
												   </view>
											</view>
										</template>

									</view>
								
								
									<view class="h-10"></view> 
									<view class="chxy-row-bt goods-cell-type" v-if="item.type === '1' &&  item.priceList.length <= 1 && !item.goodsFlavor" >
										<view class="single-price" >
											<text class="type-pub-dol">￥</text>
											<text class="type-pub-pri" :class="{'ch-type-pub-pri':['0024', '0025'].includes(storeShopInfo.orgCode)}">{{item.salePrice}}</text> 
										</view>
										<view><order-number-box @change="valChange($event,item,index,listx)" :max="9999999" :min="0" v-model="item.qty" /></view>
									</view>
								 
									<view class="chxy-row-bt goods-cell-type" v-if="item.type === '1' && item.priceList.length > 1 || item.goodsFlavor ">
										<view class="specs-price" >
										    <text class="type-pub-dol">￥</text>
										    <text class="type-pub-pri" :class="{'ch-type-pub-pri':['0024', '0025'].includes(storeShopInfo.orgCode)}">{{item.salePrice}}</text> 
										</view>
										<view @tap="$u.throttle(btnGgClick(item,index), 500)" class="specs-check-view">
											选规格
											<view class="specs-num">
												<up-badge bgColor='#28FFD9' style="color: #212121;" :value="item.qty"></up-badge>
											</view>
										</view>
									</view>
									 
									<view class="chxy-row-bt goods-cell-type" v-if="item.type === '2'" > 
										<view class="single-price" >
											<text class="type-pub-dol">￥</text>
											<text class="type-pub-pri" :class="{'ch-type-pub-pri':['0024', '0025'].includes(storeShopInfo.orgCode)}">{{item.salePrice}}</text> 
										</view> 
										<view @tap="$u.throttle(btnTcClick(item,index), 500)" class="package-check-view">
											选套餐
											<view class="package-num">
												<up-badge bgColor='#28FFD9' style="color: #212121;" :value="item.qty"></up-badge>
											</view>
										</view>
									</view> 
									<!-- <view class="h-30"></view> -->
								</view> 
							</view>
							<view class="right-goods-cell-line"></view>
						</view>
					</view>
					<view>
						<view class="h-40"></view>
					</view>
				</scroll-view>
			</view>
		</view>  

		<!-- 购物车栏  -->
		<view class="card-nav-view">
			<good-cart-nav ref="goodsCartNav" @goodsItemChange="goodsItemChange" @updat:zIndexNum="zIndexNum = $event" :zIndexNum='zIndexNum' @clearCart='clearCart'></good-cart-nav>
		</view> 

		<!-- 已点订单 悬浮拖拽按钮 -->
		<movable-order/>

		<!-- 套餐-->
		<package-product ref="testProduct"  @handleAddToCart="handleAddToCart" /> 

		<!-- 规格 -->
		<package-specs ref="specsRef" @updateSpecsData='updateSpecsData' />

	</view>
</template>
<script setup>  
    import shopTableInfo from './components/shopTableInfo.vue'; 
    import { ref, reactive, onMounted, nextTick } from 'vue'; 
	import { onLoad, onUnload,  onShow, onHide } from '@dcloudio/uni-app';
	import {  HFiveAppObjProcess, HFiveMemberAppObjProcess } from '@/api/public.js'
	import { initCardInfo, initTableInfo,initTableInfoFinish,numMultiFun,updateTableInfo } from "@/until/tools.js"
	import { clearStoreGoodsNum } from "@/until/orderUtils.js" 
	import { useCartStore } from '@/store/cart.js'; 
	import { useTableStore } from '@/store/table.js';
	// import { useUserStore } from '@/store/user.js';
	import { useWebSocket } from '@/until/websocketvue.js';
	const { connectWebSocket, sendSocketMessage, initSocketMessage,closeConnectWebSocket } = useWebSocket();
	const storeCart = useCartStore();  // 购物车store  
	// const storeUser = useUserStore(); 
	const storeTable = useTableStore();  
	const storeTableInfo = ref({})  
	const storeShopInfo = ref({})  
	
	const listx = ref([]) // 右侧商品数据
	const listxCopy = ref([]) // 右侧商品数据
	const scrollintoview = ref('')  // 右侧商品
	const rightScrollTop = ref(0)  // 右侧商品
	// const oldRightScrollTop = ref(0) 
	const timer = ref(null) // 定时器
	const distanceList = ref([])  // 右侧 计算商品的总高度
	
	const leftCheckIndex = ref(0) // 左侧分类选中坐标
	const leftList = ref([])  // 左侧分类
	const leftListCopy = ref([])  // 左侧分类
	const scrollintoviewLeft = ref('')  // 左侧   
	const isLeftClick = ref(false) // 左侧选中开关 
	
	const goodsCartNav = ref(null) // 购物车ref     
	const searchGoods = ref('')  // 头部搜索关键字   
	
	// 套餐
	const zIndexNum = ref(1) // 当前套餐弹窗与购物车弹窗不同层级切换 
	const testProduct = ref() // 当前套餐弹窗ref 
	
	// 规格
	const specsModal = ref({}) // 当前规格弹窗信息
	const specsRef = ref() // 当前规格弹窗ref     
	
	const themeInfo = ref(uni.getStorageSync('themeInfo')?.type)

	const storeCardInfo = ref(uni.getStorageSync('cardInfo') )  
	
	const bannerList = ref([])
	
	onUnload(( ) => { 
		console.log('onUnload')  
		// closeConnectWebSocket()  
	});
	
	// 返回不触发
	onLoad(( ) => { 
		console.log('onLoad')  
		initData()  
	});
	
	// 返回触发
	onShow(() => {
	    console.log('onShow')   
		uni.removeStorageSync('payAli') // 去除支付宝支付标记
		nextTick(() => {
			goodsCartNav.value.initDataNav()
		})
	}); 
	
	const initData = async() => { 
		bannerList.value = uni.getStorageSync('shopInfo')?.topList || []
		console.log('bannerList.value：',bannerList.value)
		await initTableInfoFun()   
		initGoodsFun()
		initShopInfoFun()
		storeCardInfo.value = await initCardInfo()
		console.log(storeCardInfo.value);
		// connectWebSocket()
	} 
	
	const initShopInfoFun = () => {
		storeShopInfo.value = uni.getStorageSync('shopInfo')
	}  
	
	// 通过id 定位右侧商品位置
	const toAssign = (item, index) => {
		console.log('toAssign...') 
		isLeftClick.value = true
		leftCheckIndex.value = index 
		nextTick(() => { 
			scrollintoview.value = item.id
			console.log('scrollintoview.value：',scrollintoview.value)
		}) 
	}  
	
	// 右侧滑动 左侧定位
	const rightScroll = (e) => { 
	    // oldRightScrollTop.value = e.detail.scrollTop
		setTimeout(function() { 
			if (isLeftClick.value) {
				isLeftClick.value = false
				return
			}
			if (timer.value) {
				clearTimeout(timer.value)
			}  
			timer.value = setTimeout(() => {  
				let scrollTop = e.detail.scrollTop / (uni.upx2px(100) / 100) //滚动的高度 
				let linshi = 0 
				distanceList.value.forEach((item,index)=>{
					if(scrollTop > item){
						linshi = index
					} 
				})  
				if (linshi < -1) return  
				leftCheckIndex.value = linshi   
				nextTick(() => {  
					scrollintoviewLeft.value = leftList.value[linshi].id 
				}) 
			}, 500)
		}, 200);
	}     
	
	// 跟新规格
	const updateSpecsData =  (recModal) => { 
		console.log('specsModal.value updateSpecsData：',recModal)
		let cartList = uni.getStorageSync('cartList')
		console.log('packUpdate-recModal2：',cartList)
		let newList = []
		cartList.forEach((item,index)=>{ 
			if(item.id === recModal.id){ // 或者这样判定 item.goodsCode === subitem.goodsCode
			    let title = ''
			    if(cartList[index].title){
					title = cartList[index].title
				}
				cartList[index] = recModal
				cartList[index].title = title
			} 
		}) 
		console.log('cartList：',recModal)
		storeCart.SetCartList(cartList)
		nextTick(() => {  
			goodsCartNav.value.toRefresh()
		})     
	} 
	
	//  单品跟新 async
	const valChange =  (qty, goodItem, index,list) => {  
		// 用户使用搜索的商品（ 临时判定 ）
		let cartList = uni.getStorageSync('cartList')
		if(cartList.length > list.length && searchGoods.value){
			let newList = []
			cartList.forEach((item,index)=>{
				list.forEach((subitem,subindex)=>{ 
					if(item.id === subitem.id){ // 或者这样判定 item.goodsCode === subitem.goodsCode
						item.qty = subitem.qty
					}
				})
			}) 
			storeCart.SetCartList(cartList)
			nextTick(() => {  
				goodsCartNav.value.toRefresh()
			})
			return
		} 
		// console.log('listx.value1:',uni.getStorageSync('cartList')) 
		// console.log('listx.value2:',listx.value) 
		// console.log('listx.value3:',listx.value.length)
		// console.log('listx.value4:',list.length,list)
		// 未搜索查询
		storeCart.SetCartList(list)  
		nextTick(() => {  
			goodsCartNav.value.toRefresh()
		})
	}
	
	// 套餐跟新
	const packUpdate =  (recModal) => {
		console.log('packUpdate-recModal1：',recModal)
		
		let cartList = uni.getStorageSync('cartList')
		console.log('packUpdate-recModal2：',cartList)
		let newList = []
		cartList.forEach((item,index)=>{ 
			if(item.id === recModal.id){ // 或者这样判定 item.goodsCode === subitem.goodsCode
				cartList[index] = recModal
				let title = ''
				if(cartList[index].title){
					title = cartList[index].title
				}
				cartList[index] = recModal
				cartList[index].title = title
			} 
		}) 
		storeCart.SetCartList(cartList)
		nextTick(() => {  
			goodsCartNav.value.toRefresh()
		})     
		// listx.value.forEach((item,index)=>{
		// 	if(recModal.goodsCode === item.goodsCode){
		// 		listx.value[index] = recModal
		// 	}
		// })
		// console.log('packUpdate-recModal2：',listx.value)
		// storeCart.SetCartList(listx.value)   
		// nextTick(() => {  
		// 	goodsCartNav.value.toRefresh()
		// })
	}
	
	// 购物车返回通知
	const goodsItemChange =  (emitModalValue) => { 
		wsRefresherItem(emitModalValue)
	}
	
	// 跟新单个数据
	const wsRefresherItem = (emitModalValue) => {
		// console.log('wsRefresherItem...',emitModalValue)    
		// 跟新当前的渲染
		listx.value.forEach((item)=>{ 
			if(item.id === emitModalValue.id){ 
				item.qty = emitModalValue.qty
				if(emitModalValue.specsOthList){
					item.specsOthList = emitModalValue.specsOthList
				}
				if(emitModalValue.packageOthList){
					item.packageOthList = emitModalValue.packageOthList
				}
			} 
		}) 
		// 跟新缓存
		let cartList = uni.getStorageSync('cartList')
		cartList.forEach((item)=>{ 
			if(item.id === emitModalValue.id){ 
				item.qty = emitModalValue.qty
				if(emitModalValue.specsOthList){
					item.specsOthList = emitModalValue.specsOthList
				}
				if(emitModalValue.packageOthList){
					item.packageOthList = emitModalValue.packageOthList
				}
			} 
		}) 
		nextTick(() => { 
			storeCart.SetCartList(cartList) 
		})               
	} 
	
	// 规格弹窗
	const btnGgClick =  (goodItem, index) => {
		console.log('btnGgClickgoodItem,index:', goodItem, index)
		nextTick(() => {
			specsRef.value.initDataSpecs(goodItem) 
		}) 
	} 
	
	const handleAddToCart =  ( recModal ) => { 
		console.log('recModal：',recModal)
		packUpdate(recModal)
	} 

	// 套餐
	const btnTcClick =  (goodItem, index) => {  
		goodItem?.priceList.forEach((item)=>{
			item?.detail.forEach((subitem)=>{
				if(subitem.operType === '0' && subitem.choiceType === '1'){
					subitem?.goodsDetail.forEach((vitem)=>{ 
						// 特殊的套餐结构需要补充选中状态，其余类型无需 vitem['check'] = false 
					    vitem['check'] = false 
						// goodsFlavor 调整成正常数据结构 并通过 vitem.goodsFlavor.Name 判断是否已经过滤完
						if(vitem.goodsFlavor && !vitem?.goodsFlavor[0]?.Name){
							vitem.showFlag = false
							console.log('vitem.goodsFlavor...1123')
							vitem.goodsFlavor =  filterChaosData(vitem.goodsFlavor)
							console.log('最后1：',vitem.goodsFlavor)
						} 
					})
				}else if(subitem.operType === '0' && subitem.choiceType === '0'){
					subitem?.goodsDetail.forEach((vitem)=>{
						vitem['maxQty'] = subitem.maxQty  // 业务需要控制禁止超过做大下单数量 - 临时控制
						vitem.defaultQty = Number(vitem.defaultQty) 
						if(vitem.goodsFlavor && !vitem?.goodsFlavor[0]?.Name){
							vitem.showFlag = false
							console.log('vitem.goodsFlavor...',vitem.goodsFlavor)
							vitem.goodsFlavor =  filterChaosData(vitem.goodsFlavor) 
							console.log('最后2：',vitem.goodsFlavor)
						} 
					})
				} 
				else{
					subitem?.goodsDetail.forEach((vitem)=>{ 
						vitem.defaultQty = Number(vitem.defaultQty) // 此处可以将默认值赋值为0 作为伪清空
						// goodsFlavor 调整成正常数据结构 并通过 vitem.goodsFlavor.Name 判断是否已经过滤完
						if(vitem.goodsFlavor && !vitem?.goodsFlavor[0]?.Name){
							vitem.showFlag = false
							console.log('vitem.goodsFlavor...',vitem.goodsFlavor)
							vitem.goodsFlavor =  filterChaosData(vitem.goodsFlavor) 
							console.log('最后2：',vitem.goodsFlavor)
						} 
					})
				} 
				
			})
		})
		console.log('最后3：',goodItem)
		zIndexNum.value = 1 
		nextTick(() => { 
			testProduct.value.initDataProduct(goodItem) 
		})  
	}  
    
	// 过滤查询商品  
	const searchChange = () => { 
		// console.log('searchGoods：',searchGoods.value) 
		if(!searchGoods.value){
			uni.showLoading({ title: '加载中', mask: true });
			leftList.value = uni.getStorageSync('cartTypeList')
			// leftListCopy.value 
			listx.value =  uni.getStorageSync('cartList')
			// listxCopy.value
			let allRpx = 0
			distanceList.value = [] 
			listx.value.forEach((item,index)=>{
				if(item.title && item.typeAttachment){ 
					distanceList.value.push(allRpx)
					allRpx +=  440 // 320 120 
				}else if(item.title){
					distanceList.value.push(allRpx)
					allRpx += 320
				}else{
					allRpx += 240
				}
			})     
			console.log('distanceList.value:',distanceList.value)
			uni.hideLoading()
			return
		}  
		let result = [] 
		listxCopy.value.forEach((item)=>{
			if(item.goodsName.includes(searchGoods.value)){
				item['title'] = ''
				result.push(item) 
			} 
		}) 
		if(result.length === 0){
			// uni.showToast({ title: '查询不到该商品！谢谢', icon: 'none' })   
		}    
		let newLeftList = []
		leftListCopy.value.forEach((item,index)=>{ 
			let inFalg = true
			result.forEach((subitem,subindex)=>{  
				if(item.goodsTypeCode === subitem.goodsType){   
					if(inFalg === true){
						item.id = subitem.id
						newLeftList.push(item)
						inFalg = false
					} 
				}
			}) 
		}) 
		console.log('newLeftList.value',newLeftList)  
		leftList.value = newLeftList  
		leftList.value.forEach((item,index)=>{ 
			let outFalg = true
			result.forEach((subitem,subindex)=>{ 
			  if(item.goodsTypeCode === subitem.goodsType){  
				if(outFalg === true){ 
					result[subindex].title = item.goodsTypeName
					if(item.typeAttachment){
						result[subindex].height =  440 // 320 120
						result[subindex].typeAttachment = item.typeAttachment 
					}else{
						result[subindex].height =  320 // 320 120
						result[subindex].typeAttachment = item.typeAttachment 
					} 
					outFalg = false
				}else{
					result[subindex].height = 240
				}
			  } 
		    })
		})  
		
		// 缓存循环下然后将数据同步到qty缓存中！！！！！！！！！！！
		console.log('result',result) 
		// console.log('leftList.value',leftList.value)  
		
		listx.value = result 
		let allRpx = 0
		distanceList.value = [] 
		listx.value.forEach((item,index)=>{
			if(item.title && item.typeAttachment){ 
				distanceList.value.push(allRpx)
				allRpx +=  440 // 320 120 
			}else if(item.title){
				distanceList.value.push(allRpx)
				allRpx += 320
			}else{
				allRpx += 240
			}
		})     
		console.log('distanceList.value:',distanceList.value)
	}   
	
	// 初始化桌台信息
	const initTableInfoFun = async() => { 
		storeTableInfo.value = await initTableInfo()  // 获取房台信息（包括低消） 
	}     
	
	// 初始化商品信息
	const initGoodsFun = async() => {
	    uni.showLoading({
	    	title: '加载中',
	    	mask: true
	    });
		// && 1===2
		if(uni.getStorageSync('cartList') && uni.getStorageSync('cartTypeList') && !uni.getStorageSync('shopInfo').isMaxPicMode){
			listx.value =  uni.getStorageSync('cartList')
			listxCopy.value = uni.getStorageSync('cartList')
			leftList.value = uni.getStorageSync('cartTypeList')
			leftListCopy.value = uni.getStorageSync('cartTypeList')  
			nextTick(() => {
				let allRpx = 0
				distanceList.value = [] 
				listx.value.forEach((item,index)=>{
					if(item.title && item.typeAttachment){  
						distanceList.value.push(allRpx)
						allRpx += 440 // 320 120
					}else if(item.title){
						allRpx += 320
					}else {
						allRpx += 240
					}
				})
				goodsCartNav.value.toRefresh()
			})   
			setTimeout(function() {
				uni.hideLoading();
			}, 500); 
			return
		} 
	    let resType = [] 
	    let resultGoods = [] 
		let resGoods = [] 
	    let modalType = {"functionName":"GetGoodsTypeOrg_H5","contentData":""}
		resType = await HFiveMemberAppObjProcess(modalType);
		let modalGoogs = {"functionName": "getGoodsInfoTerminal_H5", "contentData": {"terminalType":"2","currentTime":'',"roomAreaCode":storeTableInfo.value?.roomAreaCode}} 
		let resGo = await HFiveMemberAppObjProcess(modalGoogs); 
		resGoods = await new Promise((resolve) => {
		    resolve(resGo.sort((a, b) => b.indexStr - a.indexStr));
		});   
		resType.forEach((item,index)=>{ 
			resGoods.forEach((subitem,subindex)=>{ 
				let listGs = subitem.goodsType.split(',') 
				listGs.forEach((tItem,tindex)=>{  
					if(item.goodsTypeCode === tItem && subitem.isEstmClear == "0"){ 
						let newSubItem = {...subitem} 
						let randomNum = Math.floor(Math.random() * 10000000)
						newSubItem['height'] = 240
						if(!item['id']){
							item['id'] = 'Item' + index + subindex + tindex + randomNum
							newSubItem['title'] = item.goodsTypeName 
							if(item.typeAttachment){
								newSubItem['typeAttachment'] = item.typeAttachment
								newSubItem['height'] = 440 // 320 120
							}else{
								newSubItem['typeAttachment'] = ''
								newSubItem['height'] = 320 // 320 120
							} 
						} 
						newSubItem['goodsType'] = tItem
						newSubItem['qty'] = 0
						newSubItem['id'] = 'Item' + index + subindex + tindex +  randomNum
						resultGoods.push(newSubItem) 
					} 
				})  
		    })
		}) 
		leftList.value = resType.filter(item => item.id); //resType
		if(resultGoods.length <= 0){
			uni.showToast({ title: '商品数据有问题，请联系管理员！', icon: 'none' })   
			return
		} 
		listx.value =   resultGoods
		listxCopy.value = resultGoods
		leftListCopy.value = leftList.value
		storeCart.SetCartList(resultGoods)
		storeCart.SetCartTypeList(leftList.value) 
		console.log('leftList.value：',leftList.value)
		console.log('resGoods3：',resultGoods)
		nextTick(() => {
			let allRpx = 0
			distanceList.value = [] 
			listx.value.forEach((item,index)=>{
				if(item.title && item.typeAttachment){ 
					distanceList.value.push(allRpx)
					allRpx += 440 // 320 120
				}else if(item.title){
					distanceList.value.push(allRpx)
					allRpx += 320
				}else{
					allRpx += 240
				}
			})  
		})
		uni.hideLoading();  
	} 
	
	// 清空购物车与商品栏数量
	const clearCart =  ( ) => {
		// 清除缓存数量
		clearStoreGoodsNum() 
		// 清空当前渲染的数 与 拷贝的数据
		listx.value.forEach((item,index)=>{
			if(item.packageOthList){
				item.packageOthList = []
			}
			if(item.specsOthList){
				item.specsOthList = []
			}
			item.qty = 0
		})  
		listxCopy.value.forEach((item,index)=>{
			if(item.packageOthList){
				item.packageOthList = []
			}
			if(item.specsOthList){
				item.specsOthList = []
			}
			item.qty = 0
		})   
		// 被动清空购物车，也可以购物车自己主动清空
		nextTick(() => {  
			goodsCartNav.value.toRefresh()
		})   
	}
	
	// 过滤数据
	const filterChaosData =  (val) => {
		let newList = JSON.parse(val) 
		// console.log('subitem.goodsFlavor未调整前：',newList[0].FlavorStr) 
		newList.forEach((bigitem,bigindex)=>{ 
			bigitem.FlavorStr = bigitem.FlavorStr.split(',');
			bigitem['defCheck'] = []
			bigitem.FlavorStr.forEach((item,index)=>{
			    if(item.includes('#')){
				    item = item.replace('#', '');
				    bigitem['defCheck'].push(item) 
				    bigitem.FlavorStr[index] = item
			    }
		    })
		})
		return newList 
	} 
	
	const leftClick = ()=>{
		uni.switchTab({
			url: '/pages/home/index'
		})
	}
	
	// 图片预览
	const previewImageFun = (urlImg)=>{
		uni.previewImage({
			current: 0,
			urls: [urlImg],
			fail(err) {
				console.log(err)
			},
		})
	} 
	
	// 暂无用
	const filterData = async( ) => {
		const modalType = {"functionName":"GetGoodsTypeOrg_H5","contentData":""}
		const resType  = await HFiveMemberAppObjProcess(modalType)
		const modalGoogs = {"functionName": "getGoodsInfoTerminal_H5", "contentData": {"terminalType":"2","currentTime":''}}
		const resGoods  = await HFiveMemberAppObjProcess(modalGoogs) 
		const resultGoods = resType.flatMap(item =>
		    resGoods.filter(subitem => subitem.goodsType.split(',').includes(item.goodsTypeCode))
		        .map(subitem => ({ ...subitem, goodsType: item.goodsTypeCode }))
		);
		console.log('resultGoods',resultGoods) 
	} 
	
</script>

<style lang="scss" scoped>
	::v-deep{
		.u-image{
			background-color: transparent !important;
		}
	}
	.index-view{
		width: 100vw;
		height: 100vh;
		background-color: #fff; 
	}
	
	.navbar-view{
		 height: 44px;width: 100vw; 
		 .search-view{
			 width: calc(100vw - 56px);
		 }
	}
	
	.content-view{
		height: 100vh; 
		background-color: #fff;
	}
	
	.empty-view{
		position: absolute;
		top: calc(20vh + 320rpx);
		left: 0;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		.empty-gif {
			width: 320rpx;
			height: 320rpx;
		}
	}
	
	.left-goods-view{
	    width: 160rpx;
		overflow-y: scroll;
		border-radius: 0rpx 16rpx 0px 0rpx;
		height:calc(100vh - 100rpx - 100rpx);
	} 
	
	.right-goods-view{
		width: calc(100vw - 160rpx);
		position: relative;
		height:calc(100vh - 100rpx - 100rpx);
		overflow-y: scroll; 
	}
	
	.right-item-view{
		width: calc(100vw - 160rpx - 44rpx); 
		margin-left: 20rpx;
		overflow: hidden; 
	}
	
	.right-item-title{
		height: 80rpx;
		background-color: #ffffff; // f5f5f5
		.goods-title{
			padding-top: 40rpx;
			color: #666666;
			font-size: 24rpx; 
			font-weight: bold;
		}
	}
	
	.right-item-img{
		height: 120rpx;
		.item-img{
			width: 100%;
			height: 100%;
			border-radius: 20rpx 20rpx 0 0;
		}
	}
	
	.right-goods-cell{
		height: 238rpx;
	}
	
	.goods-cell-text{
		margin-left: 30rpx;
		width:310rpx; // 346rpx
	}
	
	.goods-cell-name{ 
		line-height: 28rpx;
		color: #212121;
		font-weight: bold;
		width: 310rpx; 
	} 
	.ch-goods-cell-name {
		line-height: 32rpx;
	}
	.goods-cell-desc{
		height: 30rpx;
		font-size: 20rpx;
		color: #666666; 
		width: 310rpx; 
	} 
	
	.inter-Member {   
		
		.left-xq { 
			height: 40rpx;
			background: #FFDABF;
			padding: 0 6rpx;
			font-weight: 500;
			font-size: 24rpx;
			line-height: 22rpx;
			color: #804013;
			border-radius: 4rpx 0rpx 0rpx 4rpx;
			image { 
				width: 26rpx;
				height: 26rpx;
			} 
		}
		.right-box-in {
			border-radius: 0rpx 4rpx 4rpx 0rpx;
			min-width: 120rpx;
			text-align: center; 
			height: 40rpx;
			background: #FFE9D9;
			color: #804013;
			.dol{
				font-size: 24rpx; 
			}
			.price-xj {
				height: 40rpx;
				font-family: PingFang SC;
				line-height: 40rpx;
				font-weight: 700;
				font-size: 34rpx; 
			}
		}
	}
	
	.goods-cell-type{
		width: 100%;
		height: 48rpx;
		.single-price{
			width: 172rpx;overflow-x: hidden;
		}
		.specs-price{
			width: 172rpx;overflow-x: hidden;
		}
		.specs-check-view{
			position: relative;width: 88rpx;height: 48rpx;background: var(--dt-backcolorPink);border-radius: 24rpx;border-radius: 24rpx;line-height:48rpx;text-align: center;color: var(--maincolor);font-size: 20rpx;
		    .specs-num{
				position: absolute;top: -20rpx;right: 0;color: red;
			}
		}
		.package-price{
			width: 172rpx;overflow-x: hidden;
		}
		.package-check-view{
			position: relative;
			width: 88rpx;
			height: 48rpx;
			background: var(--dt-backcolorPink);
			border-radius: 24rpx;
			border-radius: 24rpx;
			line-height:48rpx;
			text-align: center;
			color: var(--maincolor);
			font-size: 20rpx;
		    .package-num{
				position: absolute;
				top: -20rpx;
				right: 0;
				color: red;
			}
		}
	}
	
	.right-goods-cell-line{
		height: 2rpx;background : #F2F2F2;
	}
	
	.card-nav-view{
	    background-color: #fff;
		height: 100rpx;
		width: 100vw;
		position: fixed;bottom: 0;z-index: 2;
	}
	
	.noCheckBac {
		position: relative;
		background-color: #F5F5F5;
		height: 80rpx;
		padding-bottom: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} 
	.checkBac {
		background: linear-gradient(to right, #F6DEEB, #F5F4F5);
		height: 144rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-left: 10rpx solid #FF66BD; 
	}
	
	.type-pub-dol{
		font-size: 24rpx;
		color: #212121;
		font-weight: bold;
	}
	.type-pub-pri{
		font-size: 34rpx;
		color: #212121;
		font-weight: bold;
	}
	
	.checkLine{
		position: absolute;
		bottom: 1rpx;
		left:0;
		margin:0 20rpx;
		width: 90rpx;
		height: 1rpx; 
		background: #E6E6E6; 
		box-shadow: 0rpx 1rpx 0rpx 0rpx #FFFFFF;
	}
	.fl-img{
		
		filter: saturate(0) brightness(0.5) contrast(0.11); // 灰度调最后的属性
	}
	
	.wh54{
		width: 54rpx;
		height: 54rpx;
	}
	
	.fz-20{
		font-size: 20rpx;
	}
	
	.h-120{
		height: 120rpx;
	}
	.checkBacGay {
		border-left: 10rpx solid #666666 ; 
		background: linear-gradient(to right, #c5c5c5 , #eeeeee);
	}
	
	.inter-Member2 {
			// margin: 20rpx 0;
			display: flex;
			align-items: center;
			width: 248rpx;
			border: 1rpx solid #212121;
			border-radius: 4rpx;
			background: #212121;
			.left-xq {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #212121;
				padding: 0 6rpx;
				image {
					margin-right: 4rpx;
					width: 25rpx;
					height: 19rpx;
				}
				view {
					font-weight: 500;
					font-size: 20rpx;
					color: #FFCC66;
				}
			}
			.right-box {
				flex: 1;
				display: flex;
				justify-content: center;
				text-align: center;
				line-height: 32rpx;
				background: #fff;
				.price-label {
					font-size: 24rpx;
				}
				.price {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #212121;
					font-weight: 700;
				}
			}
		}
		.ch-type-pub-pri {
			font-size: 32rpx;
		}
		.ch-inter-Member2 {
			margin-top: 4rpx;
			  height: 44rpx;
			   display: flex;
			   align-items: center;
			   width: 310rpx;
			   border: 1rpx solid #212121;
			   border-radius: 4rpx;
			   background: none;
			   .left-xq {
			   	display: flex;
			   	justify-content: space-between;
			   	align-items: center;
			   	background: #212121;
			   	padding: 0 6rpx;
				height: 100%;
			   	image {
			   		margin-right: 4rpx;
			   		width: 30rpx;
			   		height: 23rpx;
			   	}
			   	view {
			   		font-weight: 500;
			   		font-size: 28rpx;
			   		color: #FFCC66;
			   	}
			   }
			   .right-box {
			   	flex: 1;
			   	display: flex;
			   	justify-content: center;
			   	text-align: center;
			   	line-height: 32rpx;
			   	background: #fff;
			   	.price-label {
					margin-top: 4rpx;
			   		font-size: 24rpx;
			   	}
			   	.price {
			   		font-family: PingFang SC;
			   		font-weight: 500;
			   		font-size: 34rpx;
			   		color: #212121;
			   		font-weight: 700;
			   	}
			   }
		}
</style>